// ================================================================================
// + Mix-Ins
// --------------------------------------------------------------------------------

// - Lib.
// --------------------------------------------------------------------------------

@mixin prefix($P, $V) {
  -webkit-#{$P}: $V;
  -epub-#{$P}: $V;
  -moz-#{$P}: $V;
  -ms-#{$P}: $V;
  @content;
  #{$P}: $V;
}

// - Properties
// --------------------------------------------------------------------------------

@mixin keyframes($N) {
  @-webkit-keyframes #{$N} {
    @content;
  }
  @-epub-keyframes #{$N} {
    @content;
  }
  @-moz-keyframes #{$N} {
    @content;
  }
  @-ms-keyframes #{$N} {
    @content;
  }
  @keyframes #{$N} {
    @content;
  }
}
@mixin animation($V) {
  @include prefix(animation, $V);
}
@mixin animation-name($V) {
  @include prefix(animation-name, $V);
}
@mixin animation-duration($V) {
  @include prefix(animation-duration, $V);
}
@mixin animation-timing-function($V) {
  @include prefix(animation-timing-function, $V);
}
@mixin animation-delay($V) {
  @include prefix(animation-delay, $V);
}
@mixin animation-iteration-count($V) {
  @include prefix(animation-iteration-count, $V);
}
@mixin animation-direction($V) {
  @include prefix(animation-direction, $V);
}

@mixin background-image_linear-gradient($to, $color_start, $color_end) {
  $from: "";
  $color_one: "";
  $color_two: "";
  @if $to == to right or $to == to bottom {
    $from: if($to == "to right", left, top);
    $color_one: $color_start;
    $color_two: $color_end;
  } @else {
    $from: if($to == to left, left, top);
    $color_one: $color_end;
    $color_two: $color_start;
  }
  @include filter-gradient(
    $color_one,
    $color_two,
    if($from == top, vertical, horizontal)
  );
  @include background-image(
    linear-gradient($from, $color_one 0%, $color_two 100%)
  );
  @include background-image(
    linear-gradient($to, $color_start 0%, $color_end 100%)
  );
}

@mixin background-image_linear-gradient_($from, $color, $lighten, $darken) {
  @include background-image_linear-gradient(
    $from,
    lighten($color, $lighten * -1),
    darken($color, $darken)
  );
}

@mixin column($V) {
  @include prefix(column, $V);
}
@mixin column-width($V) {
  @include prefix(column-width, $V);
}
@mixin column-gap($V) {
  @include prefix(column-gap, $V);
}
@mixin column-span($V) {
  @include prefix(column-span, $V);
}
@mixin column-break-before($V) {
  @include prefix(column-break-before, $V);
}
@mixin column-break-after($V) {
  @include prefix(column-break-after, $V);
}
@mixin column-break-inside($V) {
  @include prefix(column-break-inside, $V);
}

@mixin text-stroke($V) {
  @include prefix(text-stroke, $V);
}

@mixin transform-origin_($V) {
  @include prefix(transform-origin, $V);
}

@mixin writing-mode($V) {
  @include prefix(writing-mode, $V) {
    $V2: null;
    @if $V == horizontal-lr {
      $V2: lr-tb;
    } @else if $V == horizontal-rl {
      $V2: rl-tb;
    } @else if $V == vertical-rl {
      $V2: tb-rl;
    } @else if $V == vertical-lr {
      $V2: tb-lr;
    }
    -ms-writing-mode: $V2;
  }
}

// - Fonts
// --------------------------------------------------------------------------------

@mixin at-font-face($FamilyName, $FilePath, $SVGName: "") {
  @font-face {
    font-family: $FamilyName;
    src: url("#{$FilePath}.eot");
    src: url("#{$FilePath}.eot?#iefix") format("embedded-opentype"),
      url("#{$FilePath}.woff") format("woff"),
      url("#{$FilePath}.ttf") format("truetype"),
      url("#{$FilePath}.svg#{$SVGName}") format("svg");
    font-weight: normal;
    font-style: normal;
  }
}

// - Sets
// --------------------------------------------------------------------------------

@mixin off-left() {
  display: block;
  overflow: hidden;
  position: absolute;
  left: -9999px;
  top: -9999px;
  margin: 0;
  padding: 0;
  border: none 0 transparent;
  width: 0;
  height: 0;
  color: transparent;
  background: transparent;
}

@mixin vanish() {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: none 0 transparent;
  width: 0;
  height: 0;
  color: transparent;
  background: transparent;
}

@mixin font-icon($FamilyName) {
  font-family: $FamilyName;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}

// - Viewer Status
// --------------------------------------------------------------------------------

@mixin on-loading() {
  body[data-vivliostyle-viewer-status="loading"] & {
    @content;
  }
}

@mixin on-interactive() {
  body[data-vivliostyle-viewer-status="interactive"] & {
    @content;
  }
}

@mixin on-complete() {
  body[data-vivliostyle-viewer-status="complete"] & {
    @content;
  }
}
